<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="admin/_fragments :: head(~{::title})">
        <meta charset="UTF-8">
        <!--浏览器移动端预览-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>登录</title>
        <link rel="stylesheet" href="../../static/css/semantic.min.css">
        <link rel="stylesheet" href="../../static/css/me.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

    </head>
    <body>
        <style type="text/css">
            body {
                background-color: #DADADA;
            }
            body > .grid {
                height: 100%;
            }
            .image {
                margin-top: -100px;
            }
            .column {
                max-width: 450px;
            }
        </style>
        <!--首部-->
        <!--二级导航-->

        <!--中间部分-->

            <div class="ui middle aligned center aligned grid">
                <div class="column">
                    <h2 class="ui teal image header">
                        <img src="assets/images/logo.png" class="image">
                        <div class="content">
                            博客管理后台
                        </div>
                    </h2>
                    <form class="ui large form" method="post" action="#" th:action="@{/admin/login}">
                        <div class="ui stacked segment">
                            <div class="field">
                                <div class="ui left icon input">
                                    <i class="user icon"></i>
                                    <input type="text" name="username" value="summerday" placeholder="用户名">
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui left icon input">
                                    <i class="lock icon"></i>
                                    <input type="password" name="password" value="123456" placeholder="密码">
                                </div>
                            </div>
                            <div class="ui fluid large teal submit button">Login</div>
                        </div>

                        <div class="ui mini error message"></div>
                        <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">用户名和密码错误</div>

                    </form>

                </div>
            </div>

        <th:block th:replace="admin/_fragments :: script">

        </th:block>
        <!--&lt;!&ndash;底部&ndash;&gt;-->
        <!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->
        <!--<script src="../../static/js/jquery-3.5.1.min.js"></script>-->

        <!--<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>-->
        <!--<script src=../static/js/semantic.min.js"></script>-->

        <script>
			$('.ui.form')
				.form({
					fields: {
						email: {
							identifier: 'email',
							rules: [
								{
									type: 'empty',
									prompt: '请输入密码'
								}
							]
						},
						password: {
							identifier: 'password',
							rules: [
								{
									type: 'empty',
									prompt: '请输入密码'
								},
								{
									type: 'length[6]',
									prompt: '你的密码需要至少六个字符'
								}
							]
						}
					}
				})
        </script>
    </body>
</html>